<template>
  <div class="my_page_container">
    <div class="bg-white">
      <AmyQueryItem
        search-label="项目名称"
        @make-search-operator="queryTable"
      />
    </div>
    <div class="bg-white">
      <AmyCard
        :items="dbFilterList"
        class="q-mt-sm"
        itemClass="col-xl-2 col-sm-3 col-xs-8"
      >
        <template v-slot:item="props">
          <q-intersection once transition="scale">
            <AmyShadow>
              <q-card square bordered flat class="q-pa-sm q-ma-xs">
                <div class="my-card-container">
                  <div class="text-right">
                    <q-btn
                      dense
                      flat
                      icon="add_circle"
                      color="green"
                      @click="addDlgItem"
                    />
                    <q-btn
                      flat
                      dense
                      color="green"
                      icon="mdi-pencil"
                      @click="editDlgItem(props.index)"
                    />
                    <q-btn
                      flat
                      dense
                      color="green"
                      icon="mdi-close-circle"
                      @click="deleteDlgItem(props.index)"
                    />
                  </div>
                  <div><strong>ID:</strong>{{props.item.id}}</div>
                  <div><strong>名称：</strong>{{props.item.cname }}</div>
                  <div><strong>公司：</strong>{{findCatalogLabel(companyList, props.item.companyId)}}</div>
                  <div><strong>时间：</strong>{{props.item.updateTime }}</div>
                </div>
                <div class="row q-ma-xs justify-end q-gutter-xs">
                  <q-btn
                    flat
                    dense
                    color="teal"
                    size="12"
                    icon="mdi-laptop-mac"
                    @click="gotoDeviceList(props.item.id, props.item.cname)"
                  >
                    <q-tooltip>设备</q-tooltip>
                  </q-btn>
                  <q-btn
                    flat
                    dense
                    color="teal"
                    size="12"
                    icon="mdi-format-superscript"
                    @click="gotoVariableList(props.item.id, props.item.cname)"
                  >
                    <q-tooltip>变量</q-tooltip>
                  </q-btn>
                  <q-btn
                    flat
                    dense
                    color="teal"
                    size="12"
                    icon="mdi-book-open-page-variant"
                    @click="gotoPageList(props.item.id, props.item.cname)"
                  >
                    <q-tooltip>页面</q-tooltip>
                  </q-btn>
                  <q-btn
                    flat
                    dense
                    color="teal"
                    size="12"
                    icon="mdi-bell-circle-outline"
                    @click="gotoAlarmList(props.item.id, props.item.cname)"
                  >
                    <q-tooltip>报警配置</q-tooltip>
                  </q-btn>
                </div>
              </q-card>
            </AmyShadow>
          </q-intersection>
        </template>
        <template v-slot:pagination>
          <AmyPagination :page-msg="dbPagination" @update="refreshTableAry"/>
        </template>
      </AmyCard>
    </div>
    <div>
      <ProjectDlg
        ref="myAddDlgRef"
        :item-data="getActiveItem()"
        :company-arr="companyList"
        @cancel-project-item="cancelAddDlg"
        @submit-project-item="submitAddDlg"
      />
      <AmyDeleteDlg
        ref="myDelDlgRef"
        :selected-index="deletedIndex"
        @btnSubmit="submitDelDlg"/>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineAsyncComponent, defineComponent, onMounted,
  onUnmounted, onBeforeMount, reactive, ref
} from 'vue';
import api from 'axios'
import { useRouter } from 'vue-router';
import { CQueryParam } from 'src/components/basic/basicModel';

import BaseItem from '../../BaseItem.vue';
import { scaBaseUrlAPI } from 'src/util/ScaBaseConst';
import { EStatusType, ItemType } from 'src/hook/common/useCommonVisitType';
import useCommonVisitDatabase from 'src/hook/common/useCommonVisitDatabase';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';
import { useSysCatalogTbl } from 'src/hook/useSysCatalogTbl';
import { sysCatalogType } from 'src/util/SysBaseConst';
import { ProjectItem } from 'pages/sca/project/ProjectModel';

const AmyCard = defineAsyncComponent(() => import('components/grid/AmyCard.vue'));
const AmyShadow = defineAsyncComponent(() => import('components/grid/AmyShadow.vue'));
const AmyDeleteDlg = defineAsyncComponent(() => import('components/basic/AmyDeleteDlg.vue'));
const ProjectDlg = defineAsyncComponent(() => import('./ProjectDlg.vue'));
export type DeleteDlgInstance = InstanceType<typeof AmyDeleteDlg>;
export type ProjectDlgInstance = InstanceType<typeof ProjectDlg>;

export default defineComponent({
  name: 'CardPageIndex',
  extends: BaseItem,
  components: {
    AmyCard,
    AmyShadow,
    ProjectDlg
  },

  setup (props, context) {
    //*********************************************************************************************
    //      路由
    //*********************************************************************************************
    let router = useRouter();

    //*********************************************************************************************
    //      读取目录
    //*********************************************************************************************
    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool();

    const {
      companyList,
      getCatalog,
      removeCatalog
    } = useSysCatalogTbl();

    //*********************************************************************************************
    //      查询模块
    //*********************************************************************************************
    //查询输入参数
    let queryParam = reactive({
      name: '',
      startDate: '',
      endDate: ''
    });

    //有条件查询
    const queryTable = (s: CQueryParam) => {
      queryParam.name = s.name;
      queryParam.startDate = s.startDate;
      queryParam.endDate = s.endDate;

      //有条件查询
      loadList();
    }

    //*********************************************************************************************
    //      读取表格数据
    //*********************************************************************************************
    //检索响应数据
    const state = reactive({
      itemData: {
        id: 0,
        name: '',
        companyId: 0,
        logoName: '',
        logoUrl: '',
        wsAddr: '',
        wsPort: 0,
        sortCode: '',
        description: '',
        createTime: '',
        createUserId: 0,
        updateTime: '',
        updateUserId: 0
      }
    });

    //查询数据库
    const fetchApi = () => {
      return api.post(scaBaseUrlAPI.SCA_PROJECT_API_PAGE, {
        name: queryParam.name,
        startDate: queryParam.startDate,
        endDate: queryParam.endDate,
        pageNum: dbPagination.value.pageNum,
        pageSize: dbPagination.value.pageSize
      });
    };

    //删除记录
    const deleteApi = (item: ItemType) => {
      return api.post(scaBaseUrlAPI.SCA_PROJECT_API_DELETE, { id: item.id });
    };

    //增加记录
    const confirmAddApi = (item: ItemType) => {
      return api.post(scaBaseUrlAPI.SCA_PROJECT_API_ADD, {
        id: item.id,
        cname: item.cname,
        companyId: item.companyId,
        logoName: item.logoName,
        logoUrl: item.logoUrl,
        wsAddr: item.wsAddr,
        wsPort: item.wsPort,
        sortCode: item.sortCode,
        description: item.description,
        createTime: '',
        createUserId: 0,
        updateTime: '',
        updateUserId: 0
      });
    };

    //修改记录
    const confirmEditApi = (item: ItemType) => {
      return api.post(scaBaseUrlAPI.SCA_PROJECT_API_UPDATE, {
        id: item.id,
        cname: item.cname,
        companyId: item.companyId,
        logoName: item.logoName,
        logoUrl: item.logoUrl,
        wsAddr: item.wsAddr,
        wsPort: item.wsPort,
        sortCode: item.sortCode,
        description: item.description,
        createTime: '',
        createUserId: 0,
        updateTime: '',
        updateUserId: 0
      });
    };

    const {
      dbList,
      dbFilterList,
      dbPagination,
      dbCurrentIndex,
      dbStatus,
      getActiveItem,
      loadList,
      addItem,
      editItem,
      deleteItem,
      cancelItem,
      confirmApi
    } = useCommonVisitDatabase(state.itemData, fetchApi, confirmAddApi, confirmEditApi, deleteApi);

    //更新分页组件
    const refreshTableAry = (pageNum: number) => {
      dbPagination.value.pageNum = pageNum;
      loadList();
    }

    //*********************************************************************************************
    //      编辑模块
    //*********************************************************************************************
    let myDelDlgRef = ref<DeleteDlgInstance|null>(null);
    let myAddDlgRef = ref<ProjectDlgInstance|null>(null);
    let deletedIndex = ref(0);

    //添加用户
    const addDlgItem = () => {
      if (myAddDlgRef.value) {
        addItem();
        myAddDlgRef.value.show('新建项目信息');
      }
    }

    //编辑用户
    const editDlgItem = (row: number) => {
      if (myAddDlgRef.value) {
        editItem(row);
        myAddDlgRef.value.show('编辑项目信息');
      }
    }

    //删除用户
    const deleteDlgItem = (row: number) => {
      if (myDelDlgRef.value) {
        deletedIndex.value = row;
        myDelDlgRef.value.show('项目信息');
      }
    }

    //跳转到设备
    const gotoDeviceList = (projectId: number, projectName: string) => {
      router.push({
        path: '/device',
        query: {
          id: projectId,
          name: projectName
        }
      });
    }

    //跳转到变量
    const gotoVariableList = (projectId: number, projectName: string) => {
      router.push({
        path: '/variable',
        query: {
          id: projectId,
          name: projectName
        }
      });
    }

    //跳转到页面
    const gotoPageList = (projectId: number, projectName: string) => {
      router.push({
        path: '/page',
        query: {
          id: projectId,
          name: projectName
        }
      });
    }

    //报警配置
    const gotoAlarmList = (projectId: number, projectName: string) => {
      router.push({
        path: '/alarm',
        query: {
          id: projectId,
          name: projectName
        }
      });
    }

    //*********************************************************************************************
    //      增加、修改模块
    //*********************************************************************************************
    //取消添加
    const cancelAddDlg = () => {
      //判断是增加还是修改
      if (dbStatus.value === EStatusType.ADD_TYPE) {
        cancelItem(0);
      }
    }

    //新建提交
    const submitAddDlg = (item: ProjectItem) => {
      confirmApi(item);
      loadList();
    }

    //*********************************************************************************************
    //      删除确认模块
    //*********************************************************************************************
    //提交确认对话框
    const submitDelDlg = (index: number) => {
      deleteItem(index);
    }

    //*********************************************************************************************
    //      启动模块
    //*********************************************************************************************
    //初始化
    const init = () => {
      //表格数据,无条件检索
      loadList();

      //读取目录
      getCatalog(sysCatalogType.COMPANY_CODE);
    }

    //挂载
    onMounted(() => {
      init();
    });

    //下载之前
    onBeforeMount(() => {

    });

    //销毁数据
    onUnmounted(() => {
      removeCatalog(sysCatalogType.COMPANY_CODE);
    });

    return {
      queryTable,

      companyList,
      findCatalogLabel,
      findCatalogId,

      dbList,
      dbFilterList,
      dbPagination,
      dbCurrentIndex,
      getActiveItem,

      myDelDlgRef,
      myAddDlgRef,
      deletedIndex,
      addDlgItem,
      editDlgItem,
      deleteDlgItem,
      gotoDeviceList,
      gotoVariableList,
      gotoPageList,
      gotoAlarmList,

      cancelAddDlg,
      submitAddDlg,
      submitDelDlg,

      refreshTableAry
    }
  }
})
</script>

<style lang="scss" scoped>
.my_input {
  width: 150px;
}
.my-card-container {
  padding: 0px;
  margin: 0px;
  height: 160px;
}
</style>
